<template>
	<view class="profile">
		<!-- navbar -->
		<navbar />
		<!-- 背景 -->
		<topBg />
		<!-- 主体 -->
		<view class="profile-main-container">
			<!-- 用户信息 -->
			<view class="user-info-container">
				<view class="user-avatar-container">
<!-- 					<u-image width="100%" height="100%" border-radius="50%"
						:src="userInfo?userInfo.avatars:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/a4daf1cd-f8a6-449d-a19b-066089f774f1.png'" /> -->
						<u-avatar :show-level="userInfo&&userInfo.vip>0" size="112" :src="userInfo?userInfo.avatars:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/a4daf1cd-f8a6-449d-a19b-066089f774f1.png'"></u-avatar>
				</view>
				<view class="user-name-container" @click="toLogin">
					<view class="user-name">
						{{userInfo?userInfo.nickname:'立即登录'}}
						<view class="user-identity" v-if="userInfo" :class="userInfo.applet_agent == 1?'agent':userInfo.vip>0?'vip':'user'">
							<i class="iconfont icon-user-identity icon" ></i>
							{{userInfo.applet_agent == 1?'经销商':userInfo.vip>0?'VIP用户':'普通用户'}}
						</view>
					</view>
					<view class="user-phone" v-if="userInfo">
						{{userInfo.phone}}
					</view>
				</view>
			</view>
			<!-- 余额 -->
			<view class="account-balance-container">
				<view class="account-balance" @click="$u.route('/pages/balance/balance')">
					<view class="balance-count">
					<text style="font-size: 40rpx;">￥</text>{{userInfo.balance?userInfo.balance:'0.00'}}
					</view>
					<view class="balance-label">
						账户余额
					</view>
				</view>
				<view class="freeze-balance" @click="$u.route(`/pages/withdrawal/withdrawal?type=2`)">
					<view class="balance-count">
						<text style="font-size: 40rpx;">￥</text>{{userInfo.commission_balance?userInfo.commission_balance:'0.00'}}
					</view>
					<view class="balance-label">
						我的佣金
					</view>
				</view>
			</view>
			<!-- 开通vip -->
			<view class="open-vip-container">
				<view class="open-vip-left">
					<u-image width="72" height="72"
						src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/962869ad-8f74-4018-86b6-bc423ea9a684.png" />
					<view class="vip-info">
						<view class="vip-label">
							<view class="app-name">小律懂法</view>
							<view class="vip-name">VIP</view>
						</view>
						<view class="vip-status">
							{{userInfo.vip > 0?'已开通':'未开通'}}
						</view>
					</view>
				</view>
				<view class="open-vip-right" v-if="userInfo.vip == 0">
					<button class="open-btn" @click="$u.route('/pages/vip/vip')" />
				</view>
			</view>
			<!-- 工单菜单 -->
			<view class="order-list-container">
				<view class="title">我的订单</view>
				<view class="order-list">
					<view class="order-item" v-for="item,index in orderTypeList" :key="index"
						@click="$u.route(`/pages/order/order?orderType=${item.type}`)">
						<view class="order-icon">
							<i class="t-icon icon" :class="item.orderIcon"></i>
							<u-badge type="error" :count="item.badge" :offset="[-10,-15]"/>
						</view>
						<view class="order-name">
							{{item.orderName}}
						</view>
					</view>
				</view>
			</view>
			<!-- 抽屉列表 -->
			<view class="cell-list-container">
				<view class="cell-item" @click="$u.route('/pages/promote/promote')">
					<view class="cell-icon">
						<i class="t-icon t-icon-promote-fill icon" />
					</view>
					<view class="cell-right">
						<view class="cell-name">
							我的推广
						</view>
						<view class="cell-arrow">
							<u-icon name="arrow-right" />
						</view>
					</view>
				</view>
				<!-- test start -->
				<view class="cell-item" @click="$u.route('/pages_property/withdrawal_qrcode/withdrawalQRCode')">
					<view class="cell-icon">
						<i class="t-icon t-icon-qrcode-fill icon" />
					</view>
					<view class="cell-right"> 
						<view class="cell-name">
							我的收款码
						</view>
						<view class="cell-arrow">
							<u-icon name="arrow-right" />
						</view>
					</view>
				</view>
				<!-- test end -->
				<view class="cell-item" @click="$u.route('/pages_evaluation/evaluation_list/evaluationList')">
					<view class="cell-icon">
						<i class="t-icon t-icon-evaluation-fill icon" />
					</view>
					<view class="cell-right" style="border:none">
						<view class="cell-name">
							我的评价
						</view>
						<view class="cell-arrow">
							<u-icon name="arrow-right" size="28" />
						</view>
					</view>
				</view>
				<view class="cell-item" @click="$u.route('/pages/suggestions/suggestions')">
					<view class="cell-icon">
						<i class="t-icon t-icon-feedback-fill icon" />
					</view>
					<view class="cell-right">
						<view class="cell-name">
							投诉建议
						</view>
						<view class="cell-arrow">
							<u-icon name="arrow-right" />
						</view>
					</view>
				</view>

				<view class="cell-item" @click="$u.route('/pages/system_setting/systemSetting')">
					<view class="cell-icon">
						<i class="t-icon t-icon-setting-fill icon" />
					</view>
					<view class="cell-right" style="border:none">
						<view class="cell-name">
							系统设置
						</view>
						<view class="cell-arrow">
							<u-icon name="arrow-right" size="28" />
						</view>
					</view>
				</view>

			</view>
			<!-- 底部 -->
			<view class="footer-container">
				<view class="service-item">
					<view class="service-icon">
						<i class="iconfont icon-security-01 icon" />
					</view>
					<view class="service-name">
						安全保障
					</view>
				</view>
				<view class="service-item">
					<view class="service-icon">
						<i class="iconfont icon-security-02 icon" />
					</view>
					<view class="service-name">
						赔付保障
					</view>
				</view>
				<view class="service-item">
					<view class="service-icon">
						<i class="iconfont icon-security-03 icon" />
					</view>
					<view class="service-name">
						四重审核
					</view>
				</view>
				<view class="service-item">
					<view class="service-icon">
						<i class="iconfont icon-security-04 icon" />
					</view>
					<view class="service-name">
						信用积累
					</view>
				</view>
			</view>
		</view>
		<!-- tabbar -->
		<tabbar />
	</view>
</template>

<script>
	import navbar from "./components/navbar/navbar.vue";
	import topBg from "./components/top-bg/topBg.vue";
	export default {
		components: {
			navbar,
			topBg
		},
		data() {
			return {
				orderTypeList: [{
					orderName: '快速咨询',
					orderIcon: 't-icon-order-quickly',
					type: 'KS',
					badge: 0,
				}, {
					orderName: '电话咨询',
					orderIcon: 't-icon-order-mobile',
					type: 'dh',
					badge: 0,
				}, {
					orderName: '案件分析',
					orderIcon: 't-icon-order-analysis',
					type: 'FX',
					badge: 0,
				}, {
					orderName: '充值订单',
					orderIcon: 't-icon-order-topup',
					type: 'cz',
					badge: 0,
				}, {
					orderName: '会员订单',
					orderIcon: 't-icon-order-vip',
					type: 'hy',
					badge: 0,
				}]
			}
		},
		async onShow() {
			await this.$loginStatus;
			this.updateUserInfo();
		},
		methods: {
			toLogin() {
				if (this.userInfo) {
					return
				}
				this.$u.route('/pages_login/login_entry/loginEntry');
			},
			async test(){
				await this.$wx.getPermission('scope.camera','相机')
				console.log('获取权限成功>>>>>>>>>>>>>>>>>>')
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./profile.scss";
</style>
